<!-- 
《主页》

***显示***
1.所有album信息（待完善）
2.按钮，前往歌曲上传页（待完善）

***自动***
1.获取所有album信息，不获取包含的歌曲信息

***动作***
1.前往歌曲上传页面
2.前往album详情页（待完善）
3.搜索歌曲（待完成）
-->
<template>
	<view class="index-page">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="歌单" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='歌单'></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<!-- 搜索框 -->
			<view class="searchBox">
				<text class="iconfont">&#xe6e4</text>
				<input type="text" placeholder="搜索歌曲" confirm-type="search" @confirm="ToSearchPage()"
					@input="searchMusic" @blur="endSearch()" @focus="startSearch()" />
			</view>

			<scroll-view class="content-all" scroll-y="true" v-if="!status.search">
				<!-- 歌单列表 -->
				<view class="album-list">
					<view class="text">所有歌单</view>
					<view class="item" v-for="(item,index) in albumList" :key="index" @tap="ToAlbumDetails(index)">
						<view class="cover">
							<image :src='item.coverPath' mode="widthFix"></image>
							<text>每日更新</text>
						</view>
						<view class="text">
							<view class="name">{{item.name}} ({{item.number}})</view>
							<view class="desc">{{item.desc}}</view>
						</view>
					</view>
				</view>
				<!-- 歌曲列表 -->
				<view class="music-list">
					<view class="text">所有歌曲</view>
					<view class="item" v-for="(item,index) in musicList" :key="index" @tap="To_AudioDetails(index)">
						<view class="index">{{index+1}}</view>
						<view class="musicInfo">
							<view class="name">{{item.name}}</view>
							<view class="author"> {{item.author?item.author:'未知歌手'}}</view>
						</view>
					</view>
				</view>
				<view class="blank" style="height: 250rpx;"></view>
			</scroll-view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="btn-public" @tap="addNewAlbum()">
			<text class="iconfont">&#xe744;</text>
		</view>
		<player class="player-down" v-if="show_Downplayer"></player>
	</view>
</template>

<script>
	import {
		DetermineWeatherToLogIn
	} from '@/utils/common';
	import player from '@/components/player/player.vue'
	import headBarWX from '@/components/headBarWX/headBarWX.vue'
	import headBarAPP from '@/components/headBarAPP/headBarAPP.vue'
	// 导入云对象
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	const Album = uniCloud.importObject('Album', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				show_Downplayer: false,
				albumList: [],
				searchText: '',
				status: {
					search: false,
				},
				musicList: [],

				// 标识变量

			}
		},
		components: {
			headBarWX,
			headBarAPP
		},
		onLoad() {
			Album.getAlbumList().then(res => {
				this.albumList = res.data;
				console.log('所有专辑信息：', this.albumList);
			});
			cloudMusic.getMusicList().then(res => {
				console.log(res);
				this.musicList = res.data;
			});
		},
		onShow() {
			// DetermineWeatherToLogIn();
			console.log('show');
			const app = getApp();
			if (app.musicInfo.name) {
				this.show_Downplayer = true;
				uni.$emit('updatePlayerStatus');
			} else {
				console.log('无信息');
				this.show_Downplayer = false;
			}
			Album.getAlbumList().then(res => {
				this.albumList = res.data;
				console.log('所有专辑信息：', this.albumList);
			});
		},
		methods: {
			/**前往 歌单详情
			 * 
			 */
			ToAlbumDetails(index) {
				if (index == -1) {
					console.log('全部歌曲');
					const albumInfo = {
						albumID: -1,
					}
					uni.navigateTo({
						url: '/pages/album/album?albumInfo=' + JSON.stringify(albumInfo),
					});
				} else {
					const albumInfo = {
						albumID: this.albumList[index]._id,
						personalAlbum: false,
					}
					uni.navigateTo({
						url: '/pages/album/album?albumInfo=' + JSON.stringify(albumInfo),
					});
				}
			},
			/**新增 歌单
			 * 
			 */
			addNewAlbum() {
				console.log('新增');

				uni.navigateTo({
					url: '/pages/album/album_create/album_create',
				})
			},
			/**点击搜索框 开始搜索
			 * 
			 */
			startSearch() {
				console.log('开始搜索');
				this.status.search = true;
			},
			/**结束搜索
			 * 
			 */
			endSearch() {
				console.log('结束搜索');
				this.status.search = false;
			},
			/**输入框输入 自动进行
			 * 
			 */
			searchMusic(info) {
				let name = info.detail.value;
				this.searchText = name;
			},
			/**前往搜索页
			 * 
			 */
			ToSearchPage() {
				console.log('前往搜索页');
				uni.navigateTo({
					url: '/pages/search/search?searchText=' + this.searchText,
				});
			},
			/**播放音乐
			 * 
			 */
			To_AudioDetails(index) {
				uni.navigateTo({
					url: "/pages/musicPlay/musicPlay?musicID=" + this.musicList[index]._id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {}

	.player-down {
		position: fixed;
		/* #ifdef H5 */
		bottom: 90rpx;
		/* #endif */
		/* #ifdef APP */
		bottom: 0rpx;
		/* #endif */
		width: 100%;
	}

	// 搜索框
	.searchBox {
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 30rpx 30rpx 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;

		text {
			font-size: $icon-size-m-m;
			margin-right: 26rpx;
			margin-left: 28rpx;
		}

		input {
			font-size: $font-size-m-m;
			flex: 1;
		}
	}

	.content-all {
		position: fixed;
		bottom: 0rpx;
		height: 89vh;

		.music-list .text,
		.album-list .text {
			margin-left: 50rpx;
			margin-right: 50rpx;
			margin-bottom: 20rpx;
			font-size: $font-size-m-m;
			font-weight: 600;
		}

		// 歌单列表
		.album-list {
			width: 100vw;

			.item {
				display: flex;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-bottom: 20rpx;
				background-color: rgba(0, 0, 0, 0.05);
				height: 240rpx;
				border-radius: 30rpx;

				.cover {
					width: 200rpx;
					height: 200rpx;
					position: relative;
					border-radius: 30rpx;
					overflow: hidden;
					margin: auto 0;
					margin-left: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}

					text {
						position: absolute;
						left: 12rpx;
						bottom: 16rpx;
						color: white;
						font-size: 20rpx;
					}
				}

				.text {
					margin-top: 30rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					font-size: 24rpx;
					flex: 1;

					.name {
						margin-left: 10rpx;
						font-size: $font-size-m-m;
						font-weight: 600;
						line-height: 66rpx;
					}

					.desc {
						margin-top: 10rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: $font-size-s-s;
					}
				}
			}
		}

		// 歌曲列表
		.music-list {
			.item {
				display: flex;
				margin: 10rpx 10rpx 20rpx 20rpx;
				align-items: center;
				color: #959595;

				.index {
					display: flex;
					justify-content: center;
					width: 58rpx;
					font-size: $font-size-l-m;
					line-height: 30rpx;
				}

				.musicInfo {
					margin-left: 10rpx;
					flex: 1;

					.name {
						font-size: 28rpx;
						color: black;
						width: 70vw;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.author {
						font-size: 20rpx;
						align-items: center;
						width: 70vw;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}
			}
		}
	}

	// 新增 歌单 按钮
	.btn-public {
		position: fixed;
		/* #ifdef H5 */
		bottom: 200rpx;
		/* #endif */
		/* #ifdef APP */
		bottom: 110rpx;
		/* #endif */
		height: 120rpx;
		background-color: rgba(203, 116, 237, 0.5);
		width: 120rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 30rpx;

		text {
			font-size: 60rpx;
		}
	}
</style>